<template>
  <div class="app-container">
    <!-- 奖励显示区 -->
    <div class="reward-display">
      奖励积分: {{ rewardPoints }}
    </div>
    <!-- 对话输入区 -->
    <div class="chat-input">
      <input
        v-model="inputElements"
        type="text"
        placeholder="请输入两个元素，用 + 分隔（例如：💧 + 🔥）"
      />
      <button @click="synthesizeFromInput">合成</button>
    </div>
    <!-- 对话展示区 -->
    <div class="chat-display">
      <div v-for="(message, index) in chatMessages" :key="index" :class="['message', message.type]">
        {{ message.content }}
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import axios from 'axios';
export default {
  name: 'Game3',
  data() {
    return {
      inputElements: '',
      chatMessages: [
        { type: 'system', content: '欢迎来到元素合成游戏！初始元素有 💧 水、🔥 火、🌬️ 风、🌍 土。请输入两个元素进行合成。' }
      ],
      rewardPoints: 0
    };
  },
  computed: {
    ...mapState(['elements'])
  },
  created() {
    const storedElements = localStorage.getItem('elements');
    if (storedElements) {
      this.$store.commit('SET_ELEMENTS', JSON.parse(storedElements));
    } else {    
      this.$store.commit('SET_ELEMENTS', ['💧', '🔥', '🌬️', '🌍']);
    }
  },
  methods: {
    ...mapActions(['addElement']),
    async synthesizeFromInput() {
      const elements = this.inputElements.split('+').map(el => el.trim());
      if (elements.length !== 2) {
        this.chatMessages.push({ type: 'system', content: '请输入两个元素，用 + 分隔。' });
        return;
      }

      this.chatMessages.push({ type: 'user', content: this.inputElements });
      this.inputElements = '';

      try {
        const response = await axios.post(`/synthesize_elements`, {
          elements: elements
        });

        const newElement = response.data.data;
        this.addElement(newElement);
        this.rewardPoints += 10;
        this.chatMessages.push({ type: 'system', content: `合成成功！新元素是 ${newElement}。你获得了 10 积分。` });
      } catch (error) {
        if (error.response) {
          console.log('服务器响应错误:', error.response.data);
          console.log('状态码:', error.response.status);
          console.log('响应头:', error.response.headers);
          this.chatMessages.push({ type: 'system', content: '合成失败，请检查输入或稍后重试。' });
        } else if (error.request) {
          console.log('没有收到服务器响应:', error.request);
          this.chatMessages.push({ type: 'system', content: '服务器未响应，请稍后再试。' });
        } else {
          console.log('错误信息:', error.message);
          this.chatMessages.push({ type: 'system', content: '查询过程中出现错误，请重试。' });
        }
      }
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  min-height: 100vh;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.reward-display {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.chat-input {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.chat-input input {
  flex-grow: 1;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

.chat-input button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
}

.chat-input button:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.chat-display {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  min-height: 300px;
  max-height: 400px;
  overflow-y: auto;
}

.message {
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 5px;
}

.message.user {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  text-align: right;
}

.message.system {
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
}
</style>